<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body,
        #mainViewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #akViewDiv {
            padding: 0;
            margin: 0;
            height: 225px;
            width: 300px;
            background-color: rgba(255, 255, 255, 0.9);
        }

        #hiViewDiv {
            padding: 0;
            margin: 0;
            height: 135px;
            width: 200px;
            background-color: rgba(255, 255, 255, 0.9);
        }
    </style>
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require(["esri/Map",
                "esri/views/MapView",
                "esri/layers/FeatureLayer",
                "esri/widgets/Legend"],
            (Map, MapView, FeatureLayer, Legend) => {
                var layer = new FeatureLayer({
                    portalItem: {
                        id: "b234a118ab6b4c91908a1cf677941702"
                    },
                    outFields: ["NAME", "STATE_NAME", "VACANT", "HSE_UNITS"],
                    title: "U.S. counties"
                });

                var map = new Map({
                    layers: [layer]
                });

                var mainView = new MapView({
                    container: "mainViewDiv",
                    map: map,
                    popup: {
                        highlightEnabled: false,
                        dockEnabled: true,
                        dockOptions: {
                            breakpoint: false,
                            position: "top-right"
                        }
                    },
                    extent: {
                        xmin: -3094834,
                        ymin: -44986,
                        xmax: 2752687,
                        ymax: 3271654,
                        spatialReference: {
                            wkid: 5070
                        }
                    },
                    spatialReference: {//参考坐标系
                        wkid: 5070
                    },
                    ui: {
                        components: ["attribution"]
                    }
                });


                mainView.ui.add(
                    new Legend({//在右下角添加图例
                        view: mainView
                    }),
                    "bottom-right"
                );


                var akView = new MapView({
                    container: "akViewDiv",
                    map: map,
                    extent: {//显示范围
                        xmin: 396381,
                        ymin: -2099670,
                        xmax: 3393803,
                        ymax: 148395,
                        spatialReference: {
                            wkid: 5936
                        }
                    },
                    spatialReference: {
                        wkid: 5936
                    },
                    ui: {
                        components: []
                    }
                });
                mainView.ui.add("akViewDiv", "bottom-left");

                var hiView = new MapView({
                    container: "hiViewDiv",
                    map: map,
                    extent: {
                        xmin: -342537,
                        ymin: 655453,
                        xmax: 231447,
                        ymax: 1023383,
                        spatialReference: {
                            wkid: 102007
                        }
                    },
                    spatialReference: {
                        // Hawaii_Albers_Equal_Area_Conic
                        wkid: 102007
                    },
                    ui: {
                        components: []
                    }
                });
                mainView.ui.add("hiViewDiv", "bottom-left");
            });
    </script>
</head>
<body>
<div id="mainViewDiv"></div>
<div id="akViewDiv" class="esri-widget"></div>
<div id="hiViewDiv" class="esri-widget"></div>
</body>
</html>
